<template>
  <div>
    <BaseForm
      ref="searchForm"
      type="search"
      :items="formItems"
      v-model:form="searchParams"
      @search="handleSearch"
    >
      <template #suffix-button>
        <el-button type="primary" @click="handleEdit({})">
          <el-icon>
            <Plus />
          </el-icon>
          添加
        </el-button>
        <el-button type="primary" @click="handleUpload()">
          <el-icon>
            <Plus />
          </el-icon>
          导入
        </el-button>
      </template>
    </BaseForm>

    <BaseTable
      ref="baseTable"
      :getTableDataFn="contentManagementService.pageListMessageResDto"
      :searchParams="searchParams"
    >
      <el-table-column prop="messageNum" label="停电信息ID" width="120" />
      <el-table-column prop="title" label="标题" minWidth="120" />
      <el-table-column
        prop="gridAreaDtoList"
        label="相关台区"
        minWidth="170"
        show-overflow-tooltip
      >
        <template #default="scope">
          {{ scope.row.gridAreaDtoList?.map((e) => e.areaName)?.join("、") }}
        </template>
      </el-table-column>
      <el-table-column prop="createUserName" label="创建人" />
      <el-table-column prop="createTime" label="创建时间" width="170" />
      <el-table-column label="操作" fixed="right" width="100">
        <template #default="scope">
          <el-link
            :underline="false"
            link
            type="primary"
            size="small"
            @click.prevent="handleEdit(scope.row)"
            >查看详情</el-link
          >
        </template>
      </el-table-column>
    </BaseTable>
    <EditForm
      v-if="visibleEditForm"
      v-model:dialogVisible="visibleEditForm"
      :item="item"
      :handleSearch="handleSearch"
    >
    </EditForm>
    <ImportFile
      v-if="visibleUpload"
      v-model:dialogVisible="visibleUpload"
      type="message"
      :downFile="contentManagementService.failMessageDownload"
      :exportFn="contentManagementService.importMessage"
      :handleSearch="handleSearch"
      downUrl="/template/static/停电信息导入模板.xlsx"
      fileName="停电信息导入模板"
    ></ImportFile>
    <!--  <ImportFile v-if="visibleUpload" v-model:dialogVisible="visibleUpload" :item="item" :handleSearch="handleSearch" downUrl="/static/停电信息导入模板.xlsx"></ImportFile> -->
  </div>
</template>

<script setup lang="ts">
import EditForm from "./EditForm.vue";
import { contentManagementService } from "@/api/contentManagement";
import { basicConfigService } from "@/api/basicConfig";
import ImportFile from "@/components/ImportFile/index.vue";
import { lineService } from "@/api/line";
const options = ref([]);
const lineIdList = ref([]);
const formItems = ref([
  {
    name: "标题",
    key: "title",
    type: "input",
  },
  /* {
    name: '相关片区/村社',
    key: 'communityId',
    clearable: true,
    type: 'select',
    options: options,
  }, */
  {
    name: "相关台区",
    key: "areaId",
    clearable: true,
    type: "select-page",
    funName: "getByAreaQueryByArea",
    option:{
      name: 'areaName',
      value: 'areaId'
    }
  },
  // {
  //   name: '相关台区',
  //   key: 'areaId',
  //   clearable: true,
  //   type: 'select',
  //   options: lineIdList,
  // },
  {
    name: "创建人",
    key: "createUserName",
    type: "input",
  },
  { name: "创建时间", key: "date", clearable: true, type: "datetimerange" },
]);
const getLineList = () => {
  basicConfigService.getByAreaQueryDto({ data: {} }).then((res) => {
    lineIdList.value = res.data.map((n) => {
      return {
        label: n.areaName,
        value: n.areaId,
        id: n.id,
      };
    });
  });
};
const searchParams = ref({
  planCateId: "",
  schemeId: "",
  date: "",
  beginCreateTime: undefined,
  endCreateTime: undefined,
});

const getAllCommunity = () => {
  basicConfigService.getAllCommunity({ data: {} }).then((res) => {
    let data = res.data.map((e) => {
      return {
        label: e.communityName,
        value: e.communityId,
      };
    });
    options.value.push(...data);
  });
};
const baseTable = ref(null);
const handleSearch = () => {
  const date = searchParams.value.date;
  searchParams.value.beginCreateTime = date[0] || undefined;
  searchParams.value.endCreateTime = date[1] || undefined;
  baseTable.value.handleSearch({ ...searchParams.value, date: undefined });
};
const item = ref({});
const visibleEditForm = ref(false);
const handleEdit = (row) => {
  item.value = { ...row };
  visibleEditForm.value = true;
};
const visibleUpload = ref(false);
const handleUpload = () => {
  visibleUpload.value = true;
};

onMounted(() => {
  //getAllCommunity()
  // getLineList();
});
</script>

<style lang="less" scoped></style>
